<template>
  <v-card class="mx-auto">
    <v-card-title v-if="onAdding"
      >在
      {{ localArticle.category.category_name }} 栏目下发布新文章</v-card-title
    >
    <v-card-title v-else>编辑文章 {{ article.subject }}</v-card-title>
    <v-card-text>
      <v-row dense>
        <v-col cols="12">
          <CategorySelector
            v-model="localArticle.category"
            label="选择要发表文章的栏目"
          ></CategorySelector>
        </v-col>
        <v-col cols="12">
          <v-text-field
            v-model="localArticle.subject"
            placeholder="请输入文章标题"
            label="文章标题"
          ></v-text-field>
        </v-col>
        <v-col cols="12">
          <RichTextEditor v-model="localArticle.content"> </RichTextEditor>
        </v-col>
        <v-col cols="12">
          <v-text-field
            v-model="localArticle.introduction"
            placeholder="内容简介"
            label="可选，内容简介，用于列表查看"
            clearable
            counter
            maxlength="1024"
          ></v-text-field>
        </v-col>
        <v-col cols="12">
          <ImageUploader
            v-model="localArticle.cover"
            parent_dir="articleImages"
            label="可选，封面图"
          ></ImageUploader>
        </v-col>
        <v-col cols="12">
          <v-text-field
            v-model="localArticle.wechat_link"
            placeholder="微信链接"
            label="可选，微信链接"
            clearable
          ></v-text-field>
        </v-col>
      </v-row>
    </v-card-text>
    <v-card-actions>
      <v-btn color="grey" small @click.stop="$emit('cancel')">取消</v-btn>
      <v-spacer></v-spacer>
      <v-btn color="primary" small @click.stop="onSave">保存</v-btn>
      <v-btn color="primary" small @click.stop="onFinishEdit">保存&关闭</v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
// 文章编辑功能
// emit cancel和finish

import CategorySelector from "./CategorySelector";
import { Article, ArticleCategory } from "@/store/models/article";
import RichTextEditor from "@/components/RichTextEditor";
import ImageUploader from "@/components/file/ImageUploader";
import merge from "lodash/merge";

export default {
  components: {
    RichTextEditor,
    CategorySelector,
    ImageUploader
  },
  props: {
    article: Object,
  },
  data: () => ({
    localArticle: new Article(),
    category: new ArticleCategory(),
  }),
  computed: {
    onAdding() {
      return !this.article.id || this.article.id == 0;
    },
  },
  watch: {
    article: {
      handler(val) {
        // console.log('article change')
        // console.log(val)
        if (val) {
          this.localArticle = merge(new Article(), val);
        }
      },
      deep: true,
      immediate: true,
    },
    // article(val) {
    //   console.log('article change')
    //   console.log(val)
    //   this.localArticle = Object.assign(new Article(), val);
    // },
  },
  methods: {
    onFinishEdit() {
      this.$dialog.confirm({
        text: "确定要保存文章到服务器:" + this.localArticle.subject,
        title: "警告",
        waitForResult: true,
        actions: {
          false: {
            text: "取消",
            color: "blue",
          },
          true: {
            text: "确定",
            color: "red",
            handle: () => {
              return this.localArticle.createOrUpdate().then((res) => {
                this.$emit("finish", res);
                return;
              });
            },
          },
        },
      });
    },
    onSave() {
      this.localArticle.createOrUpdate().then((res) => {
        return;
      });
    },
  },
};
</script>
